<template>
    <div>
        <div class="container">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
            >
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="assemblyName" label="组件名称" align="center"></el-table-column>
                <el-table-column label="缩略图" align="center">
                    <template slot-scope="scope">
                        <el-image
                            class="table-td-logo"
                            :src="scope.row.assemblyImg"
                            :preview-src-list="[scope.row.assemblyImg]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="component" label="单页面名称" align="center"></el-table-column>
                <el-table-column label="配置" align="center">
                    <template slot-scope="scope">
                        <!-- <div v-if="!scope.row.apiUrl">
                            <el-button
                                type="text"
                                disabled
                                @click="showConfiguration(scope.$index, scope.row,1)"
                            > 内置组件配置，暂不支持</el-button>
                        </div> -->
                        
                        <div>
                            <el-button
                            type="text"
                            @click="showConfiguration(scope.$index, scope.row)"
                        >组件配置</el-button>
                        </div>
                    </template>
                </el-table-column>
                
            </el-table>
        </div>
        <el-dialog title="组件配置" :visible.sync="dialogFormVisible">
           <el-form :model="form" v-if="form.type">
                <el-form-item label="网页名称" :label-width="formLabelWidth">
                    <el-input v-model="form.authUrl" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接口URL" :label-width="formLabelWidth">
                    <el-input v-model="form.apiUrl" disabled autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="接口调用账号" :label-width="formLabelWidth">
                    <el-input v-model="form.authUsername" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="接口调用密码" :label-width="formLabelWidth">
                    <el-input v-model="form.authPassword" autocomplete="off" show-password></el-input>
                </el-form-item> -->
            </el-form>
            <el-form :model="form" v-else>
                <!-- <el-form-item label="背景色" :label-width="formLabelWidth">
                    <el-input disabled v-model="form.backgroundColor" autocomplete="off"></el-input>
                </el-form-item> -->
                <el-form-item label="刷新间隔时长(分钟)" :label-width="formLabelWidth">
                    <el-input v-model="form.schedule" disabled autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false;">确 定</el-button>
                <!-- <el-button type="primary" @click="submitConfiguration()">确 定</el-button> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { showLoading, hideLoading } from '../../utils/loading';
export default {
    name: 'basetable',
    data() {
        return {
            tableData: [],
            dialogFormVisible: false,
            form: {
                authUrl: '百度搜索',
                apiUrl: 'https://www.baidu.com/?tn=88093251_95_hao_pg',
                schedule: 10,
                thirdOne: false

            },
            formLabelWidth: '140px'

        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            showLoading();
            const u = '/screen/assembly/queryAssemblyListInfo';
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.tableData =  res.data.data;
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((err)=>{
                console.log(err);
            });
        },
        showConfiguration(index, item) {
            this.form.type = item.type;
           
            // this.form = item;
            this.dialogFormVisible = true;
        },
        submitConfiguration() {
            // console.log(this.form)
            this.dialogFormVisible = false;
            showLoading();
            let params = this.form;
            const url = '/screen/assembly/updateThirdAssembly';
            const headers = {
                'Content-Type': 'application/json;charset=UTF-8',
                'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')
            };
            this.$axios.post(url, params, {headers}).then((res) => {
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.form = {};
                    this.getData();
                }else{
                    this.$message.error(res.data.msg);
                };
                hideLoading();
            }).catch((error) => {
                console.warn(error);
            });
        }
        



    }
};
</script>

<style scoped lang="less">
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-logo {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.pagination {
    margin: 20px 0;
    text-align: right;
    display: flex;
    justify-content: space-between;
}
/deep/ .el-upload--text{
    width: 80px;
    height: 32px;
    border: 0px solid #fff;
}
</style>
